import Taro from '@tarojs/taro';
import {Image, View, Picker} from '@tarojs/components';
import {AtInput, AtTextarea} from 'taro-ui';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import head from "../../../asset/images/head.png";
import None1 from "../../../asset/myImages/img_none.png";
import Xia from "../../../asset/myImages/xia.png";
import ImgAdd from "../../../asset/myImages/img_add.png";
import './classroomApply.scss';


class MyCoupon extends Taro.Component {
    config = {
        navigationBarTitleText: '教室申请入驻',
        backgroundColor: '#fff',
    };

    state = {
        is_type: false, //false 未提交申请 true 提交申请
        name: '', //姓名
        classRoomName: '', //教室名称
        phone: '', //手机号
        sex: 1, //性别 1男 0 女
        timer: '请选择', //出生日期
        timerNext: '请选择', //教室开业时间
        zyzz: '', //教室资质
        imgWrap: [], //教室图片数组
        count: 9, //图片最大张数
        address: '', //教室地点
    };

    temp = {
        nextBtn: true //防止多次点击上传
    }

    componentDidMount() {
    }

    //input内容保存
    datum = (name,val) => {
        this.setState({
            [name]: val
        })
    };

    //选择性别
    selectSex = (is) => {
        this.setState({
            sex: is
        })
    };

    //选择出生日期
    onChangeTimer = (name, value) => {
        let time = value.detail.value.replace(/-/g,".");
        this.setState({
            [name]: time //营业执照有效期
        });
    };

    //专业资质
    handleChange = (value) => {
        this.setState({
            zyzz: value
        })
    };

    onChangeImg = (files) => {
        this.setState({
            imgWrap: files
        })
    };

    addChooseImg = () => {
        const {imgWrap, count} = this.state;
        if(imgWrap.length < 9){
            if (!this.temp.nextBtn) return;  //防止多次点击
            this.temp.nextBtn = false;  //防止多次点击
            console.log(count + 'count');
            Taro.chooseImage({
                count: count, //上传张数为1
                sizeType: ['original'],
                sourceType: ['album'],
                success: (res) => {
                    for(let i = 0;i<res.tempFilePaths.length;i++) {
                        this.temp.nextBtn = true; //防止多次点击
                        //判断证件大于7M时不执行
                        if(res.tempFiles[i].size > 7340032) {
                            unite.showTipModal(`图片太大了,请重传`);
                            continue
                        }
                        this.setState((pervState) =>({
                            count: pervState.count - 1,
                            imgWrap: pervState.imgWrap.concat([res.tempFilePaths[i]]),
                        }));
                    }
                },
                fail: () => {
                    this.temp.nextBtn = true; //防止重复点击
                }
            })
        }else{
            unite.showToast('最多只可添加9张图片')
        }
    };

    //点击删除图片
    deleteImg = (value) => {
        const {imgWrap} = this.state;
        imgWrap.splice(value,1);
        this.setState((pervState) =>({
            count: pervState.count + 1,
            imgWrap,
        }));
    };

    //地图选择定位地址
    getLoadtion = () => {
        Taro.chooseLocation({
            success: res => {
                if (res.errMsg == 'chooseLocation:ok') {
                    this.setState({
                        address: res.address
                    });
                }
            }
        })
    };

    //提交申请
    sumbit = () => {
        const {name, phone, sex, timer, timerNext, zyzz, imgWrap} = this.state;
        if (!name) return unite.showTipModal('请输入姓名');
        if (!phone) return unite.showTipModal('请输入手机号');
        if (timer == '请选择') return unite.showTipModal('请选择出生日期');
        if (timerNext == '请选择') return unite.showTipModal('请选择參加工作时间');
        if (imgWrap.length == 0) return unite.showTipModal('请上传个人照片');
        unite.showTipModal('成功');
    };

    render() {
        const {name, phone, sex, timer, timerNext, zyzz, imgWrap, is_type, classRoomName, address} = this.state;
        return (
            <View>
                {is_type ? ( //已提交审核
                    <View className="page">
                        <View className="none-wrap-page">
                            <Image className="none-img" src={None1}/>
                            <View>正在审核中…</View>
                            <View className="none-max-btn" onClick={() => {Taro.navigateBack({delta: 1})}}>返回</View>
                        </View>
                    </View>
                ) : ( //未提交
                    <View className="myPage">
                        <View className="apply-list-wrap">
                            <View className="list-item flex-lr">
                                <View className="flex-top-l">
                                    <View>业主姓名</View>
                                </View>
                                <AtInput
                                    placeholderClass="input-placeholder"
                                    border={false}
                                    name='realName'
                                    type='text'
                                    placeholder='请输入'
                                    value={name}
                                    onChange={this.datum.bind(this, 'name')}
                                    onBlur={this.datum.bind(this, 'name')}
                                />
                            </View>
                            <View className="list-item flex-lr borderTop">
                                <View className="flex-top-l">
                                    <View>手机号</View>
                                </View>
                                <AtInput
                                    placeholderClass="input-placeholder"
                                    border={false}
                                    name='realName'
                                    type='phone'
                                    placeholder='请输入'
                                    value={phone}
                                    onChange={this.datum.bind(this, 'phone')}
                                    onBlur={this.datum.bind(this, 'phone')}
                                />
                            </View>
                        </View>

                        <View className="apply-list-wrap">
                            <View className="list-item flex-lr">
                                <View className="flex-top-l">
                                    <View>性别</View>
                                </View>
                                <View className="select-sex flex-lr">
                                    <View className="flex-l" onClick={this.selectSex.bind(this, 1)}>
                                        <View className={`select flex-center ${sex == 1 ? 'selectActive' : ''}`}>
                                            <View className="acitves"></View>
                                        </View>
                                        <View>男</View>
                                    </View>
                                    <View className="flex-r" onClick={this.selectSex.bind(this, 0)}>
                                        <View className={`select flex-center ${sex == 0 ? 'selectActive' : ''}`}>
                                            <View className="acitves"></View>
                                        </View>
                                        <View>女</View>
                                    </View>
                                </View>
                            </View>
                            <View className="list-item flex-lr borderTop">
                                <View className="flex-top-l">
                                    <View>出生日期</View>
                                </View>
                                <View className="flex-r">
                                    <Picker className={`picker ${timer === '请选择' ? 'picker-color' : ''}`} mode='date' onChange={this.onChangeTimer.bind(this, 'timer')}>
                                        <View>
                                            {timer}
                                        </View>
                                    </Picker>
                                    <Image mode="widthFix" className="right-icon" src={Xia}/>
                                </View>
                            </View>
                        </View>

                        <View className="apply-list-wrap">
                            <View className="list-item flex-lr">
                                <View className="flex-top-l">
                                    <View>教室名称</View>
                                </View>
                                <AtInput
                                    placeholderClass="input-placeholder"
                                    border={false}
                                    name='realName'
                                    type='text'
                                    placeholder='请输入'
                                    value={classRoomName}
                                    onChange={this.datum.bind(this, 'classRoomName')}
                                    onBlur={this.datum.bind(this, 'classRoomName')}
                                />
                            </View>
                            <View className="list-item flex-lr borderTop">
                                <View className="flex-top-l">
                                    <View>教室开业时间</View>
                                </View>
                                <View className="flex-r">
                                    <Picker className={`picker ${timerNext === '请选择' ? 'picker-color' : ''}`} mode='date' onChange={this.onChangeTimer.bind(this, 'timerNext')}>
                                        <View>
                                            {timerNext}
                                        </View>
                                    </Picker>
                                    <Image mode="widthFix" className="right-icon" src={Xia}/>
                                </View>
                            </View>
                            <View className="list-item flex-lr borderTop">
                                <View className="flex-top-l">
                                    <View>教室地点</View>
                                </View>
                                <View className="flex-r">
                                    <AtInput
                                        placeholderClass="input-placeholder"
                                        border={false}
                                        name='realName'
                                        type='text'
                                        placeholder='请输入'
                                        value={address}
                                        onChange={this.datum.bind(this, 'address')}
                                        onBlur={this.datum.bind(this, 'address')}
                                    />
                                    <View className="flex-r"  onClick={this.getLoadtion}>
                                        <View className="classRoom-address">地点选点</View>
                                        <View className="arrow"></View>
                                    </View>
                                </View>
                            </View>
                        </View>

                        <View className="apply-list-wrap">
                            <View className="apply-list-text">教室图片</View>
                            <View className="flex-l apply-list-img">
                                {imgWrap.map((item, index) => (
                                    <View className="select-img-wrap">`
                                        <View className="close-img flex-center" onClick={this.deleteImg.bind(this, index)}>x</View>
                                        <Image mode="widthFix" key={index} className="select-img" src={item}/>
                                    </View>
                                ))}
                                <Image mode="widthFix" onClick={this.addChooseImg} className="select-img" src={ImgAdd}/>
                            </View>
                        </View>

                        <View className="apply-list-wrap">
                            <View className="apply-list-text">教室资质</View>
                            <AtTextarea
                                value={zyzz}
                                onChange={this.handleChange.bind(this)}
                                maxLength={400}
                                count={false}
                                placeholder='建议您填写教室装修程度、器械情况、交通便利'
                            />
                        </View>
                        <View className="apply-btn-wrap">
                            <View className="apply-btn flex-center" onClick={this.sumbit}>提交申请</View>
                        </View>
                    </View>
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyCoupon);



